/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/

@import url("tools/dropdown.css");
@import url("shared/option-list.css");
@import url("tools/typography.css");

.profile-options-list {
  @mixin option-list 300px;

  display: block;
  /* stylelint-disable-next-line declaration-no-important */
  padding: var(--spacing-16) !important;

  & .user,
  & .user-link {
    margin: 0;
    padding: 0;
  }

  & .user {
    display: flex;
    justify-content: flex-start;
    padding-block-end: var(--spacing-8);

    & .user-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-inline-size: 100%;
      overflow: hidden;
      padding-inline-start: var(--spacing-16);
    }

    & .user-name,
    & .user-mail {
      @mixin ellipsis;

      max-inline-size: 100%;
    }

    & .user-name {
      color: var(--color-secondary);
      font-weight: var(--font-weight-medium);
    }

    & .user-mail {
      color: var(--color-gray70);
      font-weight: var(--font-weight-regular);
    }

    &:hover {
      & .user-name {
        color: var(--color-secondary80);
      }

      & tui-avatar {
        outline: 1px solid var(--color-secondary);
      }
    }
  }

  & .user-link {
    color: var(--color-gray80);
    font-weight: var(--font-weight-medium);

    &.log-out {
      color: var(--color-secondary);
    }
  }
}

.separator {
  background: var(--color-gray30);
  margin-block: var(--spacing-8);
}
